<script setup lang="ts">
import { ref } from 'vue';
import { SettingFilled } from '@ant-design/icons-vue';
import { useSettingView, useStory } from '../../composables';
import { EVENTS, GameKernel } from '../../game';
import { STORY_ID } from '../../game/data/story';

const { show: showSetting, open: openSetting } = useSettingView();
const { state: storyState } = useStory();

const show = ref(true);

function onStartClick() {
  /** 加载存档 */
  const data = localStorage.getItem('save') || '{}';
  GameKernel.inst.load(data);

  /** 完成开始剧情直接进入游戏 */
  const startGameStory = storyState.value.completedStory.START_GAME;
  if (startGameStory) {
    GameKernel.inst.start();
    show.value = false;
    return;
  }

  /** 未完成开始剧情启动剧情 */
  GameKernel.inst.start();
  GameKernel.inst.bus.emit(EVENTS.STORY_START, STORY_ID.START_GAME);
  show.value = false;
}

GameKernel.inst.bus.on(EVENTS.STORY_STOP, () => {
  const { hasAchievedAllSuccess, currentStoryKey } = storyState.value;
  if (currentStoryKey === STORY_ID.START_GAME && !hasAchievedAllSuccess) {
    show.value = true;
  }
});
</script>

<template>
  <div
    v-if="show && !showSetting"
    class="absolute top-0 left-0 w-screen h-screen z-10 bg-container-background text-primary-text flex items-center justify-center"
  >
    <a-button size="large" @click="onStartClick">开始游戏</a-button>
    <div
      class="bg-[#1f1f1f] active:bg-[#3a3a3a] w-10 h-10 rounded-lg absolute right-6 bottom-12 flex items-center justify-center"
      @click="openSetting"
    >
      <setting-filled></setting-filled>
    </div>
  </div>
</template>
